<template>
  <view class="content">
    <!-- <headTitle title="登录" scheme="2" @onReturn="onGo"></headTitle> -->

    <!-- <image class="background-image" src="/static/images/login/background.png"></image> -->
	<view class="back">
		
	</view>

    <view class="login">
      <view class="column-center image-back">
        <image src="/static/logo.png" class="image-view" mode="aspectFit"></image>
		<view class="" style="font-size: 40rpx;margin-top: 20rpx;text-align: center;z-index: 99;">
			His系统小程序端
		</view>
      </view>
	 

      <view class="login-btn" @click="onSubmit">
        一键登录
      </view>
    </view>

    <view class="row-center" style="position: relative;">
    	<!-- 
    		 border 未选中状态
    		 border-active 未选中状态
    	 -->
    	<view class="round-border" :class="isChecked ? 'border' : 'border-acitve'" @click="handleChange">
    		<view class="round" v-if="isChecked"></view>
    	</view>
    	<view class="text">
    		我已阅读、理解并接受以下规定<text @click="onGo(`/view/user/agreement/user`)">《用户协议》</text><text @click="onGo(`/view/user/agreement/privacy`)">《隐私协议》</text>
    	</view>
    </view>
  </view>
</template>

<script setup>
import {ref, reactive, nextTick, watch, getCurrentInstance} from 'vue';
import {onLoad, onShow} from '@dcloudio/uni-app';

import { login } from "@/api/index.js"


const isChecked = ref(false);

const images = reactive([
	'/static/avatar/headAvatar-1.png',
	'/static/avatar/headAvatar-2.png',
	'/static/avatar/headAvatar-3.png',
	'/static/avatar/headAvatar-4.png',
	'/static/avatar/headAvatar-5.png',
	'/static/avatar/headAvatar-6.png',
	'/static/avatar/headAvatar-7.png',
])

const ancientFirstNames = ['慕容', '南宫', '东方', '西门', '诸葛'];
const ancientLastNames = ['云飞', '清扬', '若水', '凌霄', '子轩', '婉儿'];
function getRandomItem(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}
function generateAncientName() {
  const firstName = getRandomItem(ancientFirstNames);
  const lastName = getRandomItem(ancientLastNames);
  return firstName + lastName;
}

onLoad((e) => {})

const onGo = (url) => {
	uni.navigateTo({
		url
	})
}

const handleChange = () => {
  isChecked.value = !isChecked.value
}


const onSubmit = () => {
  uni.showModal({
  	title: '登录',
	content: '确认登录吗？',
	success: res => {
		if (res.confirm) {
			if (isChecked.value) {
			  uni.showLoading({
			    title: "登录中..."
			  })
			  uni.login({
			    provider: 'weixin', //使用微信登录
			    success: async function (loginRes) {
					
			      let res = await login({
			        code: loginRes.code,
					headImg: images[Math.floor(Math.random() * 7)],
					nickname: generateAncientName(),
			      });
			
			      uni.setStorageSync('userInfo', res.entity);
			      uni.hideLoading()
			
			
			      uni.reLaunch({
			      	url: "/view/tabbar/index/index"
			      })
			      
			    }
			  });
			} else {
			  uni.showToast({
			    icon: 'none',
			    title: '请先同意用户服务协议和隐私政策'
			  })
			}
		}
	}
  })
}

</script>

<style lang="scss">
.content {
}
.row-start {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.column-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.row-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.back {
	position: absolute;
	width: 100vw;
	height: 500rpx;
	z-index: 9;
	background-image: linear-gradient(180deg, #0d85d8 0%, #3acbe8 40%, #fff 100%)
}

.login {
  padding: 112rpx;
  padding-top: 0;
  padding-bottom: 30rpx;
}
.image-back {
	background-color: #FFF;
	border-radius: 100rpx;
	z-index: 99;
	padding-top: 250rpx;
	
}
.image-view {
	background: #fff;
    border-radius: 50%;
    width: 200rpx;
    height: 200rpx;
    /* border-radius: 40rpx; */
    padding: 20rpx;
    z-index: 99;
}

.login-btn {
  margin-top: 350rpx;
  border-radius: 64px;
  opacity: 0.8;
  background: linear-gradient(316deg, #0d85d8 18%, #3acbe8 139%);

  font-size: 28rpx;
  font-weight: 500;
  /* 纯白 */
  color: #FFFFFF;
  padding: 32rpx;
  text-align: center;
  &:active {
	  background: linear-gradient(316deg, #3acbe8 18%, #8bd8e7 139%);
  }
}

.submit {
  height: 104rpx;
  border-radius: 64px;
  opacity: 0.8;
  background: linear-gradient(308deg, #A18510 24%, #D9D1B2 126%);
  margin-top: 96rpx;
  text-align: center;

  font-size: 32rpx;
  font-weight: 500;
  line-height: 104rpx;
  /* 纯白 */
  color: #FFFFFF;
}


.round-border {
	width: 28.21rpx;
	height: 28.21rpx;
	border-radius: 50%;
	border: 2rpx #1295D8 solid;
	padding: 2rpx;
	box-sizing: border-box;
	margin-top: 32.05rpx;
	
	.border {
		border: 2rpx #B2B2B2 solid;
	}
	.border-active {
		border: 2rpx #1295D8 solid;
	}
	
	.round {
		background-color: #1295D8;
		border-radius: 50%;
		width: 100%;
		height: 100%;
	}
	
}

.text {
	margin-top: 32.05rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 23rpx;
	color: #B2B2B2;
	margin-left: 12.85rpx;
	text {
		color: #000;
	}
}
</style>
